<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内置的边</title>
</head>
<body>
<div id="mountNode"></div>
<script src="../build/g6.js"></script>
<script>
  const graph = new G6.Graph({
    container: 'mountNode',
    width: 800,
    height: 600,
    defaultNode: {
      size: [40, 40],
    },
    modes: {
      default: [ 'brush-select', 'drag-node' ]
    }
  });

  /*
  * data
  */
  const data = {
    nodes: [
      {
        id: 'node1',
        label: 'node1',
        x: 100,
        y: 100,
        // shape: 'circle'
      },
      {
        id: 'node4',
        // label: 'node4',
        x: 150,
        y: 300,
        style: {
          opacity: 0,
          fill: '#fff',
          stroke: '#fff'
        } 
        // shape: 'rect'
      },
      {
        id: 'node5',
        label: 'node5',
        x: 200,
        y: 100,
        // shape: 'rect'
      },
      {
        id: 'node6',
        // label: 'node6',
        x: 350,
        y: 300,
        style: {
          opacity: 0,
          fill: '#fff',
          stroke: '#fff'
        } 
        // shape: 'rect'
      },
      {
        id: 'node7',
        // label: 'node7',
        x: 350,
        y: 200,
        style: {
          fill: '#fff',
          stroke: '#fff'
        } 
        // shape: 'rect'
      },
      {
        id: 'node8',
        label: 'node8',
        x: 350,
        y: 450,
        // shape: 'rect'
      },
    ],
    edges: [
      // {
      //   source: 'node1',
      //   target: 'node4',
      //   shape: 'polyline',
      //   label: 'edge1-4',
      //   controlPoints: [
      //     { x: 100, y: 200 },
      //   ],
      //   style: {
      //     radius: 10,
      //     offset: 20
      //   }
      // },
      // {
      //   source: 'node4',
      //   target: 'node5',
      //   shape: 'polyline',
      //   label: 'edge5-7',
      //   style: {
      //     lineWidth: 1.5,
      //     stroke: '#888',
      //   }
      // },
      // {
      //   source: 'node4',
      //   target: 'node7',
      //   shape: 'line'
      // },
      {
        source: 'node4',
        target: 'node6',
        shape: 'cubic',
        label: 'cubic',
        style: {
          stroke: '#088',
          lineWidth: 3
        },
        labelCfg: {
          refY: 10,
          refX: 40
        }
      },
      // {
      //   source: 'node6',
      //   target: 'node8',
      //   shape: 'arc'
      // },
      // {
      //   source: 'node5',
      //   target: 'node7',
      //   shape: 'quadratic'
      // },
      // {
      //   source: 'node4',
      //   target: 'node8',
      //   shape: 'polyline',
      //   style: {
      //     radius: 10,
      //     offset: 20
      //   }
      // },
    ]
  }

  graph.data(data)
  graph.render()

  // graph.on('edge:click', evt => {
  //   console.log(evt)
  //   const { item } = evt
  //   graph.updateItem(item, {
  //     style: {
  //       lineWidth: 3,
  //       stroke: 'red'
  //     }
  //   })
  //   // const hasState = item.hasState('select')
  //   // if(!hasState) {
  //   //   graph.setItemState(item, 'select', true);
  //   // }
  // })

  // graph.on('edge:mouseenter', evt => {
  //   const { item } = evt;
  //   graph.setItemState(item, 'hover', true); 
  // })

  // graph.on('edge:mouseleave', evt => {
  //   const { item } = evt;
  //   const hasState = item.hasState('select')
  //   if(!hasState) {
  //     graph.setItemState(item, 'hover', false);
  //     graph.setItemState(item, 'running', false);
  //   }
  // }) 


graph.on('edge:mouseenter', evt => {
  const { item } = evt
  graph.setItemState(item, 'hover', true)
})

graph.on('edge:mouseleave', evt => {
  const { item } = evt
  graph.setItemState(item, 'hover', false)
})

graph.on('edge:click', evt => {
  const { item } = evt
  graph.setItemState(item, 'select', true)
})

  
</script>
</body>
</html>
